<template>
  <el-card :class="['stock-list', type]">
    <el-table
      :data="sortedData"
      style="width: 100%"
      :row-class-name="getRowClassName"
      @sort-change="handleSortChange"
    >
      <el-table-column
        prop="code"
        label="股票代码"
        width="100"
      />
      <el-table-column
        prop="name"
        label="股票名称"
        width="120"
      />
      <el-table-column
        prop="price"
        label="当前价格"
        width="100"
      />
      <el-table-column
        prop="changePercent"
        label="涨跌幅"
        width="100"
        sortable="custom"
      >
        <template slot-scope="scope">
          <span :class="scope.row.changePercent >= 0 ? 'up-text' : 'down-text'">
            {{ scope.row.changePercent }}%
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="threeDayChange"
        label="三日涨幅"
        width="100"
        sortable="custom"
      >
        <template slot-scope="scope">
          <span :class="scope.row.threeDayChange >= 0 ? 'up-text' : 'down-text'">
            {{ scope.row.threeDayChange }}%
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="fiveDayChange"
        label="五日涨幅"
        width="100"
        sortable="custom"
      >
        <template slot-scope="scope">
          <span :class="scope.row.fiveDayChange >= 0 ? 'up-text' : 'down-text'">
            {{ scope.row.fiveDayChange }}%
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="limitUpDays"
        label="连板天数"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.limitUpDays > 0" class="limit-up-text">
            {{ scope.row.limitUpDays }}板
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        label="预测结果"
        width="180"
        sortable="custom"
        prop="predictionScore"
      >
        <template slot-scope="scope">
          <div class="prediction-cell">
            <el-tag :type="getRecommendationType(scope.row.recommendation)">
              {{ scope.row.recommendation }}
            </el-tag>
            <span 
              class="score-text"
              :style="{ color: getScoreColor(scope.row.predictionScore) }"
            >
              {{ Math.round(scope.row.predictionScore) }}分
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  name: 'StockList',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'normal'
    }
  },
  data() {
    return {
      sortedData: [],
      currentSort: {
        prop: '',
        order: ''
      }
    }
  },
  watch: {
    data: {
      immediate: true,
      handler(newVal) {
        this.sortedData = [...newVal]
        if (this.currentSort.prop && this.currentSort.order) {
          this.handleSortChange(this.currentSort)
        }
      }
    }
  },
  methods: {
    handleSortChange({ prop, order }) {
      if (!prop || !order) {
        this.sortedData = [...this.data]
        this.currentSort = { prop: '', order: '' }
        return
      }
      
      this.currentSort = { prop, order }
      const sortOrder = order === 'ascending' ? 1 : -1
      this.sortedData = [...this.data].sort((a, b) => {
        const aValue = parseFloat(a[prop])
        const bValue = parseFloat(b[prop])
        return (aValue - bValue) * sortOrder
      })
    },
    getRowClassName({ row }) {
      return row.changePercent >= 0 ? 'up-row' : 'down-row'
    },
    
    getRecommendationType(recommendation) {
      switch (recommendation) {
        case '强烈推荐':
          return 'success'
        case '建议买入':
        case '可以关注':
          return 'warning'
        case '需要观察':
        case '保持观望':
        case '注意风险':
        case '建议规避':
          return 'danger'
        default:
          return 'info'
      }
    },
    
    getScoreColor(score) {
      if (score >= 90) return '#67C23A'
      if (score >= 80) return '#85ce61'
      if (score >= 70) return '#E6A23C'
      if (score >= 60) return '#f0c78a'
      if (score >= 50) return '#909399'
      return '#F56C6C'
    },
    
    getPercentage(score) {
      if (!score) return 0
      return Math.round(parseFloat(score))
    }
  }
}
</script>

<style scoped>
.stock-list {
  margin-bottom: 20px;
}

.up-text {
  color: #f56c6c;
}

.down-text {
  color: #67c23a;
}

.up-row {
  background-color: #fef0f0;
}

.down-row {
  background-color: #f0f9eb;
}

.prediction-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 10px;
}

.score-text {
  font-weight: bold;
  font-size: 14px;
  margin-left: 8px;
}

.limit-up-text {
  color: #E6A23C;
  font-weight: bold;
}

/* 自定义表头排序图标颜色 */
.el-table .ascending .sort-caret.ascending {
  border-bottom-color: #409EFF;
}

.el-table .descending .sort-caret.descending {
  border-top-color: #409EFF;
}
</style> 